<!--超链接组件-->

<template>
  <div class="hyperlink-comp w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <a class="hyperlink-text"
       :style="Object.assign({
         color: component.compConfigData.defaultStyle.color,
         fontSize: component.compConfigData.defaultStyle.fontSize + 'px',
         fontWeight: component.compConfigData.defaultStyle.fontWeight,
         letterSpacing: component.compConfigData.letterSpacing + 'px',
         writingMode: component.compConfigData.writingMode,
         textDecoration: component.compConfigData.textDecoration,
       }, styleObject)" @click="clickHandler()">
      {{component.compConfigData.text ? component.compConfigData.text: runCustomFilter(component.compConfigData.ds_resultObj)[0].text}}
    </a>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'HyperlinkComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        hyperlink_type: 'link',

        text: '',
        href: '',
        target: '_self',

        letterSpacing: 0,
        writingMode: 'horizontal-tb',

        defaultStyle: {
          color: '#fff',
          fontSize: 18,
          fontWeight: 'normal',
          shadowColor: '',
          shadowBlur: 0,
          textDecoration: 'none'
        },
        hoverStyle: {
          color: '#2196f3',
          fontSize: 18,
          fontWeight: 'normal',
          shadowColor: '',
          shadowBlur: 0,
          textDecoration: 'underline'
        },

        customClickJsCode: ''

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'text',
            remark: '文本'
          },
          {
            field: 'href',
            remark: '链接地址'
          }
        ],
        ds_resultObj: [
          {
            "text": "动态文本",
            "href": ""
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      clickHandler () {
        if (this.component.compConfigData.hyperlink_type == 'link') {
          this.$PnUtil.jumpLink(this.component.compConfigData.href ? this.component.compConfigData.href: this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].href, this.component.compConfigData.target)
        }else if (this.component.compConfigData.hyperlink_type == 'custom') {
          eval(this.component.compConfigData.customClickJsCode)
        }
      }
    },
    computed: {
      styleObject () {
        let obj = {
          '--color-hover': this.component.compConfigData.hoverStyle.color,
          '--fontSize-hover': this.component.compConfigData.hoverStyle.fontSize + 'px',
          '--fontWeight-hover': this.component.compConfigData.hoverStyle.fontWeight,
          '--shadow-hover': '0px 0px ' + this.component.compConfigData.hoverStyle.shadowBlur + 'px '
              + this.component.compConfigData.hoverStyle.shadowColor,
          '--textDecoration-hover': this.component.compConfigData.hoverStyle.textDecoration,
        }
        return obj
      }
    }
  };

  export default _this
</script>

<style lang="less" scoped>
  .hyperlink-comp {
    /* 上下垂直居中 */
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    .hyperlink-text {
      &:hover {
        color: var(--color-hover) !important;
        font-size: var(--fontSize-hover) !important;
        font-weight: var(--fontWeight-hover) !important;
        text-shadow: var(--shadow-hover) !important;
        text-decoration: var(--textDecoration-hover) !important;
      }
    }
  }
</style>
